<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
  <ButtonCounter />

  <!-- <BlogPost title="My journey with Vue" /> -->

  <!-- <BlogPost v-for="post in posts" :key="post.id" :title="post.title" /> -->

  <div :style="{ fontSize: postFontSize + 'em' }">
    <BlogPost
      v-for="post in posts"
      :key="post.id"
      :title="post.title"
      @enlarge-text="postFontSize += 0.1"
    />
  </div>
  <!--组件的事件监听器也支持 .once 修饰符-->
  <BlogPost
    v-for="post in posts"
    :key="post.id"
    :title="post.title"
    @enlarge-text.once="postFontSize += 0.1"
  />
  <br />
  <!--事件参数-->
  <MyButton @increase-by="increaseCount" />
  <SubmitButton @submit="mysubmit" name="提交" />
  <br />
  <!--组件 v-model-->
  <div>
    <input :value="searchText" @input="searchText = $event.target.value" />
    <CustomInput
      :model-value="searchText"
      @update:model-value="(newValue) => (searchText = newValue)"
    />
    <CustomInput v-model="searchText" />{{ searchText }}
  </div>
  <br />
  <!--v-model 的参数-->
  <div><MyComponent v-model:title="bookTitle" />{{ bookTitle }}</div>

  <!--多个 v-model 绑定-->
  <div>
    <UserName v-model:first-name="first" v-model:last-name="last" />{{
      first + last
    }}
  </div>
  <!--处理 v-model 修饰符-->
  <div><MyComponent1 v-model.capitalize="myText" />{{ myText }}</div>

  <!--透传 Attributes-->
  <div>
    <Button01 class="large" />
    <Button02 class="large" />
  </div>

  <!--插槽 Slots-->
  <Button03>
  Click me! <!-- 插槽内容 -->
</Button03>
</template>

<script setup>
import { ref, onMounted } from "vue";
import ButtonCounter from "./ButtonCounter.vue";
import BlogPost from "./BlogPost.vue";
import MyButton from "./MyButton.vue";
import SubmitButton from "./SubmitButton.vue";
import CustomInput from "./CustomInput.vue";
import MyComponent from "./MyComponent.vue";
import UserName from "./UserName.vue";
import Button01 from "./Button01.vue";
import Button02 from "./Button02.vue";
import Button03 from "./Button03.vue";
const posts = ref([
  { id: 1, title: "My journey with Vue" },
  { id: 2, title: "Blogging with Vue" },
  { id: 3, title: "Why Vue is so fun" },
]);

const postFontSize = ref(1);

const count = ref(0);
function increaseCount(n) {
  count.value += n;
  console.info("count=>" + count.value);
}

function mysubmit(n) {
  count.value += n;
  console.info("submit=>" + count.value);
}

const searchText = ref("searchText");
const bookTitle = ref("bookTitle");
const first = ref("first");
const last = ref("last");
const myText = ref("myText");
</script>
